<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-cascades"></i> 角色管理
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">
        <el-input
            v-model="query.name"
            placeholder="角色名"
            class="handle-input mr10"
        ></el-input>
        <el-button type="primary" icon="el-icon-search" @click="handleSearch"
        >搜索
        </el-button
        >
        <el-button
            type="primary"
            icon="el-icon-circle-plus-outline"
            @click="handleAdd"
        >新增
        </el-button
        >
      </div>
      <div class="clist">
        <div><i class="el-icon-s-data"></i>角色信息列表</div>
      </div>
      <el-table
          :data="tableData"
          border
          class="table"
          ref="multipleTable"
          header-cell-class-name="table-header"
      >
        <el-table-column
            :show-overflow-tooltip="true"
            :prop="item.prop"
            :label="item.label"
            v-for="item in props"
            :key="item.prop"
        >
        </el-table-column>
        <el-table-column>
          <el-table-column
              label="操作"
              width="180"
              align="center"
              fixed="right"
          >
            <template #default="scope">
              <el-button
                  type="text"
                  icon="el-icon-edit"
                  @click="handleEdit(scope.row.sid)"
                  v-if="!(scope.row.sid ==='1' || scope.row.sid ==='2' || scope.row.sid ==='3' )"
              >编辑
              </el-button>
              <el-button
                  type="text"
                  icon="el-icon-delete"
                  class="red"
                  @click="handleDelete(scope.$index, scope.row.sid)"
                  v-if="!(scope.row.sid ==='1' || scope.row.sid ==='2' || scope.row.sid ==='3' )"
              >删除
              </el-button
              >
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
            :currentPage="query.pageNum"
            :page-sizes="[10, 20, 40]"
            :page-size="query.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageTotal"
            @size-change="handleSizeChange"
            @current-change="handlePageChange"
        >
        </el-pagination>
      </div>
    </div>
    <div>
      <el-dialog
          title="添加角色"
          v-model="addVisible"
          width="40%"
      >
        <el-form :model="form" label-width="80px">
          <el-form-item label="角色名称" prop="name">
            <el-input
                v-model="form.name"
                class="handle-input mr10"
            ></el-input>
          </el-form-item>
        </el-form>
        <template #footer>
        <span class="dialog-footer">
          <el-button @click="addVisible = false">取消</el-button>
          <el-button type="primary" @click="addSaveEdit">保存</el-button>
        </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {ref, reactive} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import {useRouter} from "vue-router";
import request from "../../utils/request";

export default {
  name: "RoleManagement",
  setup() {
    const root = "/role/";
    const router = useRouter();

    const props = [
      {label: "学院名称", prop: "name"},
      // { label: "学院简称", prop: "shortName" },
      // { label: "学院介绍", prop: "intro" },
      // { label: "院长", prop: "president" },
    ];
    const addVisible = ref(false);
    const query = reactive({
      name: "",
      pageNum: 1,
      pageSize: 10,
    });
    const tableData = ref([]);
    const pageTotal = ref(0);
    // 获取表格数据

    const getData = () => {
      request
          .get(root + "page", {
            params: query,
          })
          .then((res) => {
            if (res.code == 18) {
              ElMessage.warning(res.msg);
              tableData.value = []
            } else {
              tableData.value = res.data.records;
              pageTotal.value = res.data.total;
            }
          });
    };
    getData();
    // 查询操作
    const handleSearch = () => {
      query.pageNum = 1;
      getData();
    };
    // 分页大小
    const handleSizeChange = (val) => {
      query.pageSize = val;
      getData();
    };
    // 分页导航
    const handlePageChange = (val) => {
      query.pageNum = val;
      getData();
    };

    // 删除操作
    const handleDelete = (index, sid) => {
      // 二次确认删除
      ElMessageBox.confirm("确定要删除吗？", "提示", {
        type: "warning",
      })
          .then(() => {
            request.delete(root + sid).then((res) => {
              if (res.data) {
                ElMessage.success("删除成功");
                tableData.value.splice(index, 1);
              } else {
                ElMessage.error("删除失败");
              }
            });
          })
          .catch(() => {
          });
    };

    // 新增操作
    const handleAdd = () => {
      form.sid = "";
      form.name = "";
      addVisible.value = true
      // router.push("/admin/addCollege");
    };

    // 表格编辑时弹窗和保存
    const editVisible = ref(false);
    let form = reactive({});
    const handleEdit = (sid) => {
      addVisible.value = true
      request.get(root + sid).then((res) => {
        form.sid = res.data.sid;
        form.name = res.data.name;
      });
      // router.push({path: "/admin/addCollege", query: {id: sid}});
    };
    const addSaveEdit = () => {
      // entity.value.cid = "1"
      if (form.sid) {  // 更新
        request.put("/role", form).then(res => {
          console.log(res)
          if (res.code === '0') {
            ElMessage.success("更新成功")
            getData() // 刷新表格的数据
            addVisible.value = false  // 关闭弹窗
          } else {
            ElMessage.error(res.msg)
          }
          form.sid = "";
          form.name = "";
          getData() // 刷新表格的数据
          addVisible.value = false  // 关闭弹窗
        })
      } else {  // 新增
        request.post("/role", form).then(res => {
          if (res.code === null) {
            ElMessage.success("新增成功")
          } else {
            ElMessage.error(res.msg)
          }
          form.sid = "";
          form.name = "";
          getData() // 刷新表格的数据
          addVisible.value = false  // 关闭弹窗
        })
      }
    }
    return {
      props,
      query,
      tableData,
      pageTotal,
      editVisible,
      form, addVisible, addSaveEdit,
      handleSearch,
      handleSizeChange,
      handlePageChange,
      handleAdd,
      handleDelete,
      handleEdit,
    };
  },
};
</script>

<style scoped>
.clist {
  background: #3ca2e0;
  height: 50px;
  font-size: 25px;
  display: flex;
  align-items: center;
}

.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}

.table {
  width: 100%;
  font-size: 14px;
}

.red {
  color: #ff0000;
}

.mr10 {
  margin-right: 10px;
}

.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
</style>
